<template>
  <div class="avue-sidebar" >
    <logo></logo>
    <el-scrollbar style="height:100%">
      <el-menu unique-opened
               :default-active="nowTagValue"
               mode="vertical"
               :show-timeout="200"
               background-color="rgb(59, 71, 99)"
               :text-color="theme"
               :collapse="keyCollapse">
        <!--:menu="menu"-->
        <sidebar-item
                      first
                      :screen="screen"
                      :props="website.menu.props"
                      :collapse="keyCollapse"></sidebar-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters ,mapMutations} from 'vuex'
import logo from '../logo';
import sidebarItem from './sidebarItem'
import { setStore, getStore } from '@/util/store'
import { getMenuOfParentId } from "@/api/public/menu"
import { validatenull } from '@/util/validate'
import { RestructureMenu } from '@/util/util'
export default {
  name: 'sidebar',
  components: { sidebarItem, logo },
  data () {
    return {}
  },
  created () {
      let parentId = validatenull(getStore({ name: 'parentId'})) ? 0 :getStore({ name: 'parentId'})
      getMenuOfParentId({ parentId:parentId }).then(res =>{
      if (res.data.code == 200) {
          let menuData = RestructureMenu(res.data.data[0].children);
          this.$router.$avueRouter.formatRoutes(menuData, true);
          this.SET_MENU(menuData)
      }
    })
  },
  computed: {
    ...mapGetters(['website', 'menu', 'tag', 'keyCollapse', 'screen','theme']),
    nowTagValue: function () { return this.$router.$avueRouter.getValue(this.$route) }
  },
  mounted () { },
  methods: {
      ...mapMutations(['SET_MENU']),
  }
}
</script>
<style lang="scss" scoped>
</style>